<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple">
                    <el-form :inline="true" label-width="100" :model="formInline" class="demo-form-inline">
                        <el-form-item label="开始批次">
                            <el-input size="mini" v-model="formInline.startPlaneNo" placeholder="开始批次"></el-input>
                        </el-form-item>
                        <el-form-item label="工作包号">
                            <el-input size="mini" v-model="formInline.packageCode" placeholder="工作包号"></el-input>
                        </el-form-item>
                        <el-form-item label="配套状态">
                            <el-select size="mini" v-model="formInline.State" placeholder="配套状态">
                                <el-option label="所有" value=""></el-option>
                                <el-option label="初始状态" value="00"></el-option>
                                <el-option label="配套完成" value="02"></el-option>
                                <el-option label="缺件状态" value="04"></el-option>
                                <el-option label="取消状态" value="06"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物料缺件状态">
                            <el-select size="mini" v-model="formInline.Astate" placeholder="物料缺件状态">
                                <el-option label="所有" value=""></el-option>
                                <el-option label="不缺" value="00"></el-option>
                                <el-option label="A类缺件" value="A"></el-option>
                                <el-option label="B类缺件" value="B"></el-option>
                                <el-option label="C类缺件" value="C"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分拣状态">
                            <el-select size="mini" v-model="formInline.sortingStatus" placeholder="分拣状态">
                                <el-option label="所有" value=""></el-option>
                                <el-option label="未分拣" value="00"></el-option>
                                <el-option label="分拣中" value="01"></el-option>
                                <el-option label="分拣中" value="02"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="配送状态">
                            <el-select size="mini" v-model="formInline.delieveryState" placeholder="配送状态">
                                <el-option label="所有" value=""></el-option>
                                <el-option label="未配送" value="00"></el-option>
                                <el-option label="部分配送" value="02"></el-option>
                                <el-option label="配送完成" value="04"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" type="primary" @click="doQuery">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple">
                    <slot>工作包列表</slot>
                    <el-table :data="packageinfo.tableData" highlight-current-row border @current-change="currentDataChange" height="300" stripe style="width: 100%">
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="productCode"  label="机型代码" width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="productName"  label="机型名称" width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="batchNo"  label="批次" width="180" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="startPlaneNo"  label="开始批次" width="180" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="endPlaneNo"  label="结束批次" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="packageCode"  label="工作包代码" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="state"  label="配套状态" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="aState"  label="物料缺件状态" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="sortingStatus"  label="分拣状态" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="deliveryState"  label="配送状态" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="remark"  label="备注" width="160" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="packageinfo.page.currentPage"
                        :page-sizes="[20, 50, 100, 500]" :page-size="packageinfo.page.pageSize" layout="total, sizes, prev, pager, next" :total="packageinfo.page.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple">
                    <slot>AO列表</slot>
                    <el-table :data="aoinfo.tableData" border height="300" stripe style="width: 100%">
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="sortingStatusName"  label="分拣状态" width="100"></el-table-column>
                        <el-table-column prop="stateName"  label="缺件状态" width="100"></el-table-column>
                        <el-table-column prop="aoCode"  label="AO号" width="180" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="aoName"  label="AO名称" width="180" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="planeNo"  label="架次" width="160"></el-table-column>
                        <el-table-column prop="packageCode"  label="工作包编号" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="delieveryStateName"  label="配送状态" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="aStateName"  label="缺件状态" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <!-- <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="aoinfo.page.currentPage"
                        :page-sizes="[20, 50, 100, 500]" :page-size="aoinfo.page.pageSize" layout="total, sizes, prev, pager, next" :total="aoinfo.page.total">
                    </el-pagination> -->
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <slot>物料清单</slot>
                    <el-table :data="billinfo.tableData" border height="300" stripe style="width: 100%">
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="itemCode"  label="图号" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="itemQty"  label="需求数量" width="160"></el-table-column>
                        <el-table-column prop="repartAss"  label="装配图号" show-overflow-tooltip></el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <slot>配套清单</slot>
                    <el-table :data="matchinfo.tableData" border height="300" stripe style="width: 100%">
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="isSortName"  label="分拣状态" width="100"></el-table-column>
                        <el-table-column prop="stateName"  label="配套状态" width="100"></el-table-column>
                        <el-table-column prop="itemCode"  label="图号" width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="qualityCode"  label="质量编号" width="180"></el-table-column>
                        <el-table-column prop="packageCount"  label="分拣数量" width="160"></el-table-column>
                        <el-table-column prop="itemQty"  label="需求数量" width="160"></el-table-column>
                        <el-table-column prop="matchQty"  label="分配数量" width="160"></el-table-column>
                        <el-table-column prop="repartAss"  label="装配图号" show-overflow-tooltip></el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import request from '@/utils/request.js';
export default {
    name:"",
    data(){
        return {
            //查询条件
            formInline:{
                startPlaneNo:"",
                packageCode:"",
                State:"",
                Astate:"",
                sortingStatus:""
            },
              //工作包信息
            packageinfo:{
                tableData:[],
                page:{
                    currentPage:1,
                    total:0,
                    pageSize:20
                },
                currentData:{}
            },
            //AO信息
            aoinfo:{
                tableData:[],
                page:{
                    currentPage:1,
                    total:0,
                    pageSize:20
                },
                currentData:{}
            },
            //物料清单信息
            billinfo:{
                tableData:[]
            },
            //配套信息
            matchinfo:{
                tableData:[]
            }
        }
    },
    methods:{
        doQuery(){//查询工作包清单
            request.post("/PackageSortTaskQueryRest/searchPackage",{page:this.packageinfo.page,queryParam:this.formInline}).then((res)=>{
                this.packageinfo.tableData = res.data.list;
                this.packageinfo.page.total = res.data.total;
            });
        },

        loadAoInfo(){//加载AO清单
            request.post("/PackageSortTaskQueryRest/searchAO",this.packageinfo.currentData).then((res)=>{
                this.aoinfo.tableData = res.data;
            });
        },
        loadMatchInfo(){//加载物料清单
            request.post("/PackageSortTaskQueryRest/searchMaterial",this.packageinfo.currentData).then((res)=>{
                this.billinfo.tableData = res.data;
            });
        },
        loadBillInfo(){//加载配套清单
            request.post("/PackageSortTaskQueryRest/searchSupportingFacilities",this.packageinfo.currentData).then((res)=>{
                this.matchinfo.tableData = res.data;
            });
        },
        handleCurrentChange(val){
            this.packageinfo.page.currentPage = val;
            this.$options.methods.doQuery.bind(this)();
        },
        handleSizeChange(val){
            this.packageinfo.page.pageSize = val;
            this.$options.methods.doQuery.bind(this)();
        },
        currentDataChange(currentRow, oldCurrentRow){
            this.packageinfo.currentData = currentRow;
            this.$options.methods.loadAoInfo.bind(this)();
            this.$options.methods.loadMatchInfo.bind(this)();
            this.$options.methods.loadBillInfo.bind(this)();
        }
        
    }
}
</script>